<script setup>
// 引入three
import * as THREE from 'three'
// 引入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
// 引入模型加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
// 引入模型解析器
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
// 引入hdr加载器
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
// 引入补间动画库
import * as TWEEN from 'three/examples/jsm/libs/tween.module.js'
// 引入 GUI
// import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'

// 创建三维场景
const scene = new THREE.Scene()
// 创建透视相机
const camera = new THREE.PerspectiveCamera(
  75, // 视野参数
  window.innerWidth / window.innerHeight, // 长宽比
  0.1, // 进截面
  1000 // 远截面
)
// 设置相机视角
camera.position.set(2, 2, 8)

// 创建渲染器
const renderer = new THREE.WebGLRenderer()
// 设置渲染器的尺寸
renderer.setSize(window.innerWidth, window.innerHeight)
// 将渲染器放置到页面中（或指定放到页面中的某个元素中）
document.body.appendChild(renderer.domElement)


// 加载hdr贴图
const rgbeloader = new RGBELoader()
rgbeloader.load('/public/textures/hdr/1.hdr', (envMap) => {
  // 设置球形贴图
  envMap.mapping = THREE.EquirectangularReflectionMapping
  // 设置环境贴图
  scene.background = envMap
  // 设置环境贴图
  scene.environment = envMap

})


// 创建模型加载器对象
const glftloader = new GLTFLoader()
// 创建解析器对象
const dracoLoader = new DRACOLoader()
// 指定解析器路径
dracoLoader.setDecoderPath('./draco/')
// 给加载器指定解析器
glftloader.setDRACOLoader(dracoLoader)
// 加载模型
glftloader.load('/public/models/ferrari.glb', (gltf) => {
  console.log(gltf)
  scene.add(gltf.scene)
})



// // 创建物体
// const cube1 = new THREE.Mesh(
//   // 几何体
//   new THREE.SphereGeometry(1, 32, 16),
//   // 材质
//   new THREE.MeshBasicMaterial({ color: 'pink' })
// )

// // 将物体添加到场景中
// scene.add(cube1)


// cube1.geometry.computeBoundingBox() // 计算并生成包围盒
// console.log(cube1.geometry.boundingBox) // 输出包围盒信息
// const boxHelper = new THREE.BoxHelper(cube1, 0xffff00) // 创建包围盒辅助线
// scene.add(boxHelper)


// // 创建交互
// const raycaster = new THREE.Raycaster()
// const pointer = new THREE.Vector2()

// window.addEventListener('click', (event) => {
//   pointer.x = (event.clientX / window.innerWidth) * 2 - 1
//   pointer.y = - (event.clientY / window.innerHeight) * 2 + 1
//   // console.log(pointer.x, pointer.y)

//   // 通过摄像机和鼠标位置更新射线
//   raycaster.setFromCamera(pointer, camera)

//   // 计算射线和物体的焦点（用来判断能否点到物体）
//   const intersects = raycaster.intersectObjects(scene.children)

//   // 点击模型变色（再次点击变回原色）
//   if (intersects.length > 0) {
//     if (intersects[0].object._isSelect) {
//       intersects[0].object.material.color.set(intersects[0].object._selectColor)
//       intersects[0].object._isSelect = false
//       return
//     }
//     intersects[0].object._isSelect = true
//     intersects[0].object._selectColor = intersects[0].object.material.color.getHex()
//     intersects[0].object.material.color.set(0xff0000)
//   }
// })


// 创建补间动画
// const tween = new TWEEN.Tween(cube1.position)
// const tween1 = new TWEEN.Tween(cube1.position)

// 指定移动方向、距离以及所需时间
// tween.to({ x: 5 }, 3000)
// tween1.to({ y: 5 }, 3000)

// 连续动画
// tween.chain(tween1)

// 设置重复次数 - Infinity一直动 （注意，该属性设置的是重复的次数，它原本那一次并不会算到重复次数里面，因此参数为‘2’实际一共会运动3次）
// tween.repeat(Infinity)
// tween.repeat(2)
// 设置来回运动
// tween.yoyo(true)
// 开启补间动画
// 延迟开启
// tween.delay(3000)
// 设置缓动函数 - Quadratic.InOut 这个是贝塞尔曲线
// tween.easing(TWEEN.Easing.Quadratic.InOut)
// tween.start()

// 创建GUI
// const gui = new GUI()

// 这是动画处于各个运动阶段的回调函数
// tween.onStart(() => {
//   console.log('开始')
// })
// tween.onComplete(() => {
//   console.log('结束')
// })
// tween.onStop(() => {
//   console.log('停止')
// })
// tween.onUpdate(() => {
//   console.log('更新-可用于获取移动时的轨迹坐标')
// })

// // 封装事件函数
// const tweenes = {
//   start: () => {
//     tween.start()
//     console.log('开始')
//   },
//   stop: () => {
//     tween.stop()
//     console.log('停止')
//   },
//   pause: () => {
//     tween.pause()
//     console.log('暂停')
//   },
//   resume: () => {
//     tween.resume()
//     console.log('继续')
//   }
// }

// gui.add(tweenes, 'start').name('开始')
// gui.add(tweenes, 'stop').name('暂停')
// gui.add(tweenes, 'pause').name('暂停')
// gui.add(tweenes, 'resume').name('继续')

// 添加世界坐标辅助器
const axesHelper = new THREE.AxesHelper(5)
// 将坐标辅助器添加到场景中
scene.add(axesHelper)


// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
// 开启阻尼系数
controls.enableDamping = true
// 设置阻尼系数
controls.dampingFactor = 0.05


// 创建动画函数
function animate() {
  requestAnimationFrame(animate)
  // 开启轨道控制器，需要设置update
  controls.update()
  TWEEN.update()
  renderer.render(scene, camera)
}
// 调用
animate()

// 设置画布自适应屏幕大小
window.addEventListener('resize', () => {
  // 重置渲染器输出画布canvas尺寸
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 全屏情况下：设置观察范围长宽比aspect为窗口宽高比
  camera.aspect = window.innerWidth / window.innerHeight
  // 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
  camera.updateProjectionMatrix()
})
</script>

<template>
  <div></div>
</template>

<style scoped></style>\